<template>
    <ul @click="onPagerClick" class="el-pager">
        <li
                :class="{ active: currentPage === 1, disabled }"
                v-if="pageCount > 0"
                class="number">1
        </li>
        <li
                class="el-icon more btn-quickprev"
                :class="[quickprevIconClass, { disabled }]"
                v-if="showPrevMore"
                @mouseenter="onMouseenter('left')"
                @mouseleave="quickprevIconClass = 'el-icon-more'">
        </li>
        <li
                v-for="pager in pagers"
                :key="pager"
                :class="{ active: currentPage === pager, disabled }"
                class="number">{{ pager }}
        </li>
        <li
                class="el-icon more btn-quicknext"
                :class="[quicknextIconClass, { disabled }]"
                v-if="showNextMore"
                @mouseenter="onMouseenter('right')"
                @mouseleave="quicknextIconClass = 'el-icon-more'">
        </li>
        <li
                :class="{ active: currentPage === pageCount, disabled }"
                class="number"
                v-if="pageCount > 1">{{ pageCount }}
        </li>
    </ul>
</template>

<script type="text/babel">
    export default {
        name: 'ElPager',

        props: {
            currentPage: Number,

            pageCount: Number,

            pagerCount: Number,

            disabled: Boolean
        },

        watch: {
            showPrevMore(val) {
                if (!val) this.quickprevIconClass = 'el-icon-more';
            },

            showNextMore(val) {
                if (!val) this.quicknextIconClass = 'el-icon-more';
            }
        },

        methods: {
            onPagerClick(event) {
                const target = event.target;
                if (target.tagName === 'UL' || this.disabled) {
                    return;
                }

                let newPage = Number(event.target.textContent);
                const pageCount = this.pageCount;
                const currentPage = this.currentPage;
                const pagerCountOffset = this.pagerCount - 2;

                if (target.className.indexOf('more') !== -1) {
                    if (target.className.indexOf('quickprev') !== -1) {
                        newPage = currentPage - pagerCountOffset;
                    } else if (target.className.indexOf('quicknext') !== -1) {
                        newPage = currentPage + pagerCountOffset;
                    }
                }

                /* istanbul ignore if */
                if (!isNaN(newPage)) {
                    if (newPage < 1) {
                        newPage = 1;
                    }

                    if (newPage > pageCount) {
                        newPage = pageCount;
                    }
                }

                if (newPage !== currentPage) {
                    this.$emit('change', newPage);
                }
            },

            onMouseenter(direction) {
                if (this.disabled) return;
                if (direction === 'left') {
                    this.quickprevIconClass = 'el-icon-d-arrow-left';
                } else {
                    this.quicknextIconClass = 'el-icon-d-arrow-right';
                }
            }
        },

        computed: {
            pagers() {
                const pagerCount = this.pagerCount;
                const halfPagerCount = (pagerCount - 1) / 2;

                const currentPage = Number(this.currentPage);
                const pageCount = Number(this.pageCount);

                let showPrevMore = false;
                let showNextMore = false;

                if (pageCount > pagerCount) {
                    if (currentPage > pagerCount - halfPagerCount) {
                        showPrevMore = true;
                    }

                    if (currentPage < pageCount - halfPagerCount) {
                        showNextMore = true;
                    }
                }

                const array = [];

                if (showPrevMore && !showNextMore) {
                    const startPage = pageCount - (pagerCount - 2);
                    for (let i = startPage; i < pageCount; i++) {
                        array.push(i);
                    }
                } else if (!showPrevMore && showNextMore) {
                    for (let i = 2; i < pagerCount; i++) {
                        array.push(i);
                    }
                } else if (showPrevMore && showNextMore) {
                    const offset = Math.floor(pagerCount / 2) - 1;
                    for (let i = currentPage - offset; i <= currentPage + offset; i++) {
                        array.push(i);
                    }
                } else {
                    for (let i = 2; i < pageCount; i++) {
                        array.push(i);
                    }
                }

                this.showPrevMore = showPrevMore;
                this.showNextMore = showNextMore;

                return array;
            }
        },

        data() {
            return {
                current: null,
                showPrevMore: false,
                showNextMore: false,
                quicknextIconClass: 'el-icon-more',
                quickprevIconClass: 'el-icon-more'
            };
        }
    };
</script>
